<template>
  <view id="page">
    <form @submit="formSubmit">
      <view class="section">
        <view class="section-title">社团信息</view>
        <view class="blank-line"></view>
        <view class="input">
          <text class="input-label">社团名称</text>
          <input disabled :value="deptById.deptName"></input>
        </view>
      </view>
      <view class="section">
        <view class="section-title">申请信息</view>
        <view class="blank-line"></view>
        <view class="input">
          <text class="input-label">姓名</text>
          <input name="name" placeholder="请填写姓名 (必填)"></input>
        </view>
        <view class="input">
          <text class="input-label">班级</text>
          <input name="class" placeholder="请填写班级 (必填)"></input>
        </view>
        <view class="input">
          <text class="input-label">学号</text>
          <input
            name="number"
            placeholder="请填写学号 (必填)"
            type="number"
          ></input>
        </view>
        <view class="input">
          <text class="input-label">电话</text>
          <input
            name="phone"
            placeholder="请填写电话号码 (必填)"
            type="number"
            maxlength="11"
          ></input>
        </view>
        <view style="padding:30rpx 0;">
          <text-area  class="text-area" :placeholder="'申请理由 (必填)'" :maxlength="500"></text-area>
        </view>
      </view>
      <view class="btn-wrap">
        <button form-type="submit" class="btn bg-primary">提交申请</button>
      </view>
    </form>
  </view>
</template>

<script>
import {changeDept} from '@/api/user'
import {mapGetters} from 'vuex'
import {addMessage} from "../../../api/message";

export default {
  name: "index",
  data() {
    return {
      deptById: {},
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  mounted() {
    this.deptById = JSON.parse(this.$root.$mp.query.data)
    // this.getList()

  },
  methods: {
    formSubmit(e) {
      let remark = this.$root.$mp.page.selectComponent(".text-area").data.content
      let val = e.mp.detail.value;
      let name = val.name.trim(),
        classs = val.class.trim(),
        number = val.number.trim(),
        phone = val.phone.trim();

      if (!name) {
        this.setToast({title: "请填写姓名"});
        return false;
      } else if (!classs) {
        this.setToast({title: "请填写班级"});
        return false;
      } else if (!number) {
        this.setToast({title: "请填写学号"});
        return false;
      } else if (!phone) {
        this.setToast({title: "请填写电话"});
        return false;
      } else if (!remark) {
        this.setToast({title: "请填写申请理由"});
        return false;
      }
      /*else if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(phone) || phone.length != 11) {
        this.setToast({title: "请填写正确电话"});
        return false;
      }*/

      wx.showLoading({title: "提交中", mask: true});
      let form = {
        name: name,
        class: classs,
        number: number,
        phone: phone,
        remark: remark
      };
      changeDept(JSON.stringify(this.user), 'sq', JSON.stringify(this.deptById.deptId), JSON.stringify(this.deptById)).then(response => {
        if (response.code === 200) {
          wx.hideLoading();
          this.setToast({title: "申请成功，请等待社团审核！"});
          let message = {
            fromId: this.user.userId,
            fromName: this.user.userName,
            toId: 1,
            toName: 'admin',
            messageTitle: '社团申请',
            identity: '0',
            type: '0',
            payload: JSON.stringify(form),
            messageContent: '【' + this.user.userName + '】用户申请加入【' + this.deptById.deptName + '】社团，请注意查看！'
          }
          addMessage(message)
          wx.navigateBack({
            delta: 1
          });
        } else {
          wx.hideLoading();
          this.setModal({content: "嘤嘤嘤，提交过程出现异常QAQ"});
        }
      }).catch(res => {
        console.log(res);
      }).then(() => {
        wx.hideLoading();
      });
    }
  }
}
</script>

<style scoped>
.textarea-placeholder,
.input-placeholder {
  color: #c0c0c0;
}

.section {
  margin-bottom: 20rpx;
  padding: 30rpx 30rpx 0 30rpx;
  background-color: #ffffff;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
}

textarea {
  width: 100%;
  height: 100rpx;
}

.count-text {
  flex: 1;
  text-align: right;
  color: #afafaf;
}

.blank-line {
  width: 60rpx;
  margin-top: 10rpx;
  border: 4rpx solid #ffcb57;
  border-radius: 15rpx;
}

.input {
  display: flex;
  height: 100rpx;
  line-height: 100rpx;
  align-items: center;
  border-bottom: 1rpx solid #f1f1f1;
}

.input-label {
  width: 25%;
  font-size: 30rpx;
}

.input-date {
  color: #c0c0c0;
}

.btn-wrap {
  padding: 30rpx;
}

.btn {
  font-size: 30rpx;
  border: 3rpx solid #363636;
}

</style>
